<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>FOMO</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no,viewport-fit=cover">
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="./plugins/bootstrap/css/bootstrap.css">

  <style>
    body{
      background-image: url("./img/bg.png");
      background-repeat: no-repeat;
      background-size:cover;
      padding: 0 40px 0 40px;
    }
    .container-box{
      height: 616px;
    }
    .top-box{
      /*margin-top: 50px;*/
      text-align: right;
    }
    .title-logo{
      margin-top: 70px;
    }
    .index-info-box{
      margin-top: 20px;
      width: 100%;
      height: 200px;
    }
    .start-btn-box{
      margin: 120px auto;
      text-align: center;
      height: 38px;
    }
    .start-btn{
      cursor: pointer;
      display: none;
    }
    .bottom-box{
      height: 196px;
    }
    /*iphone x*/
    @media screen and (max-device-height:812px){

    }
  </style>
</head>

<body>
  <div class="container-box">
    <div class="top-box">
      <img src="./img/index-top.png" class="index-top" >
    </div>

    <div class="title-box">
      <img src="./img/mobile.png" >
      <!--<img src="./img/fomo.png" class="title-logo">-->
    </div>

    <div class="index-info-box">
      <img src="./img/index-know.png" class="index-info">
    </div>

    <div class="start-btn-box">
      <img src="./img/start.png" class="start-btn">
    </div>
  </div>
  <div class="bottom-box">

  </div>

  <script src="./plugins/jQuery/jquery.min.js"> </script>
  <script src="./plugins/bootstrap/js/bootstrap.min.js"> </script>
  <script>
    $(function () {
      setTimeout(loadImg,2000);
    });

    var imgArr = ['index-know.png','index-have.png','index-level.png'];
    var imgIdx = 0;
    function loadImg() {
      imgIdx++;
      if(imgIdx < imgArr.length && imgIdx >= 0){
        var imgPath = "./img/" + imgArr[imgIdx];
        $('.index-info').attr('src',imgPath);
        setTimeout(loadImg,2000);

        if(imgIdx == imgArr.length -1){
          $(".start-btn").show();
        }
      }
    }

    // touch the screen
    $('body').on('touchend',function(){
      loadImg();
    });

    $(".start-btn").click(function () {
      window.location.href='./intro.html';
    });
  </script>
</body>

</html>
